<html>
<head><title></title>
    <meta charset="utf-8"/><!--link(rel="stylesheet" href="/bootstrap/css/bootstrap.min.css")-->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/util/normalize.css">
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">宿舍管理系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ol class="breadcrumb">
                <li><a href="#">缺勤记录</a></li>
                <li class="active"> 当前用户：<span class="span1">(系统管理员)</span>
                </li>
            </ol>
            <div class="btn-group pull-right div3" role="group" aria-label="...">
                <button type="button" class="btn btn-danger">退出系统</button>
            </div>
            <div class="btn-group menuRight pull-right">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <img src="img/systemAdministrator.jpg" alt="..." class="img-circle img">
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">个人信息</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">注销</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <form action="#" class="form-inline inline-block">
                <div class="form-group">
                    <input type="text" name="name" class="form-control input-sm" placeholder="书本">
                </div>
                <div class="form-group">
                    <input type="number" name="minPrice" class="form-control input-sm" placeholder="最低价">
                </div>
                <div class="form-group">
                    <input type="number" name="maxPrice" class="form-control input-sm" placeholder="最高价">
                </div>
                <button type="button" class="btn btn-search btn-default btn-sm">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </form>
            <div class="inline-block" style="float: right;">
                <button type="button" onclick="insert(event)" class="btn btn-success">添加</button>
                <button type="button" onclick="delBatch(event)" class="btn btn-success">批量删除</button>
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <td class="text-center"><input name='cb_select_all' type='checkbox'></td>
                    <td class="text-center">序号</td>
                    <td class="text-center">书名</td>
                    <td class="text-center">日期</td>
                    <td class="text-center">单价</td>
                    <td class="text-center">数量</td>
                    <td class="text-center">操作</td>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div><!--script(src='/js/util/jquery.js')-->
<script src="/js/util/jquery.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/dataTables/jquery.dataTables.js"></script>
<script src="/js/util/js.cookie.js"></script>
<script src="/js/util/lodash.js"></script>
<script src="/js/util/mock.js"></script>
<script src="/js/util/moment.js"></script>
<script>
    //相当于window.onload
    $(function () {
        //保证页面加载成功之后，才执行这里代码
        // $.ajax()
        // $.get()
        // $.post()
        $.get("/api/book/list.do?pageNum=2&pageSize=20", function (data) {
            console.log(data);
            data.books.forEach(value => {
                $("table>tbody").append(`
                   <tr>
                    <td><input type="checkbox" name="cb_select" value="${value.id}"></td>
                    <td>${value.id}</td>
                    <td>${value.name}</td>
                    <td>${value.createDate}</td>
                    <td>${value.price}</td>
                    <td>${value.count}</td>
                    <td>
                        <button class="btn btn-success">编辑</button>
                        <button class="btn btn-danger">删除</button>
                    </td>
                   </tr>
                `);
            });
        });

        $(".btn-search").click(function () {
            let params = $("form").serialize();
            console.log(params);
            $.post("/api/book/list.do", {
                name: $("input[name='name']").val(),
                minPrice: $("input[name='minPrice']").val(),
                maxPrice: $("input[name='maxPrice']").val()
            }, function (data) {
                console.log(data);
                $("table>tbody").empty();
                data.books.forEach(value => {
                    $("table>tbody").append(`
                   <tr>
                    <td><input type="checkbox" name="cb_select" value="${value.id}"></td>
                    <td>${value.id}</td>
                    <td>${value.name}</td>
                    <td>${value.createDate}</td>
                    <td>${value.price}</td>
                    <td>${value.count}</td>
                    <td>
                        <button class="btn btn-success">编辑</button>
                        <button class="btn btn-danger">删除</button>
                    </td>
                   </tr>
                `);
                });
            })
        });
    })
</script>
</body>
</html>